<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>活动图模块</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            section #event{
                width: 1100;
                height: 170;
                background: #000;
                margin: 0 auto;
            }
            /* 图片票 ；li */
            section #event ul li{
                float: left;
                /* 间隙：上侧，左侧位 */
                margin-left: 13.3px;
                margin-top: 10px;
            }
            /* 图片：宽高 */
            section #event ul li img{
                width: :266px;
                height: 260px;
            }
            /* 去掉左侧位，外边距 0*/
            section #event ul li:first-child{
                border: 1px solid red;
                margin-left: 0;
            }
            /* 移动动上面改变效果：下阴影 */
            section #event ul li:hover{
                filter: drop-shadow(0 0 8px #c1bbbf);
            }
        </style>
    </head>
    <body>
        <!--section结构化元素：页面区域划分，文章分节，章节划分 活动图中控区 -->
        <section>
        <div id="event">
            <ul>
                <li><img src="img/left.png" alt="1"></li>
                <li><img src="img/subnav_icon01.png" alt="2"></li>
                <li><img src="img/subnav_icon02.jpg" alt="3"></li>
                <li><img src="img/subnav_icon03.png" alt="4"></li>
            </ul>
        </div>    
        </section>
        
    </body>
</html>